<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            text-decoration: none;
            list-style: none;
        }
        .wrap{
            display: flex;
            margin:100px auto;
            margin-left:100px;
        }
        ul{
            display: flex;
            justify-content: center;
            align-content: center;
        }
        ul li{
            width:30px;
            height:30px;
            border:1px solid red;
            text-align: center;
            line-height: 30px;
        }
        #pagecut{
            margin-top:5px;
        }
        .page{
            margin:50px 100px;
        }
        .page li{
            line-height: 2;
        }
    </style>
</head>

<body>
    <ol class="page">
        
    </ol>
    <div class="wrap">
            <button class="prevs">上一页</button>
            <ul id="list">
               
            </ul>
            <button class="nexts">下一页</button>
            <div id="pagecut">
                <!-- <span>总共<b>13</b>条</span> -->
                <select name="" id="select1">
                   
                   
                </select>
            </div>
    </div>
    
    
    <script src="./page_cut.js"></script>
    <script>
       
        let obj = new cutPage({
            el: document.getElementById("pagecut"), //类挂载的元素
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,14,15,16,17,18,19,20,21,22], //总数据
            pageLength: [5, 10, 15,20], //每页显示的数据条数；（select框显示的数据）
            
            //select框中的每页展示条数改变时触发，获取到当前选择的每页显示的条数
            cb1: function(data) {
                //点击2条/页时  应出现13/2调数据7页数据每页两条
                console.log(data)

            },
            
            //页码改变时触发，接受到当前页的数据
            cb2: function(data) {
                console.log(data)
            },
            cb3:function(pageLength){//点击select的内容
                console.log(pageLength);
                let str="";
                pageLength.forEach(function(i){
                    str+=` <option value="${i}">${i}条/页</option>`
                })
                select1.innerHTML=str;
            }
        })
        
    </script>
</body>

</html>